<link rel="import" href="../../polymer/polymer-element.html">
<link rel="import" href="../../polymer/lib/elements/dom-repeat.html">
<link rel="import" href="../../polymer/lib/elements/dom-if.html">
<link rel="import" href="theme.html">

<dom-module id="hakuneko-start">
    <template>
        <style include="theme"></style>
        <style>
            #container {
                width: calc(100% - 2em);
                height: calc(100% - 2em);
                padding: 1em;
                background-color: var(--page-control-background-color);
                background-image: var(--page-background-image);
                overflow-y: scroll;
                background-size: cover;
                background-repeat: no-repeat;
                background-position: left top;
                font-size: 1.25em;
                
            }
            .show {
                display: block ;
            }
            .hide {
                display: none;
            }
            h1 {
                font-size:1.5em;
                margin-top:0;
                margin-bottom:0;
                vertical-align:center;
            }
            h3 {
                margin-bottom:0.1em;
            }
            .border {
                border: 2px solid #cdcdcd;
                border-color: rgba(0, 0, 0, .14);
                border-radius: 1em;
                background-color: var(--chapter-list-background-color);
                padding: 1em;
            }
            .logo {
                margin-right: 1em;
                border-radius: 10%;
            }
        </style>
        <div id="container">
           <h1>Welcome to HakuNeko</h1>
           <div>
                <p class="border">
                    <img class="logo" src="./img/logo_s.png"  align="left"/>
                    <strong>HakuNeko</strong> was made to help users who download media for circumstances that requires offline usage. <br/>
                    The philosophy is <u>ad-hoc consumption</u>, get it when you want to read/watch it.<br/>
                    Read the "how to use" documentation at hakuneko.download (link available in the menu)
                </p>
            </div>
            <div>
                <h3>Find a site to get the content you want to view</h3>
                <div class="border">
                    <strong>HakuNeko</strong> is not hosting anything. Find a website on the internet that provides the content you want. Then :
                    <ol>
                        <li><i class="fas fa-fw fa-plug fa-flip-horizontal" title="Select a website from which the manga list should be shown"></i> Select your connector (the website). Use the filters</li>
                        <li><i class="fas fa-fw fa-sync" title="Select a website from which the manga list should be shown"></i> Click on the refresh button (can take minutes)</li>
                        <li><i class="fas fa-fw fa-search" title="Filter the manga list by their titles"></i> Find a manga</li>
                        <li><i class="fas fa-fw fa-language" title="Select a language to filter the chapter list"></i> Filter chapters by language (optional)</li>
                        <li><i class="fas fa-fw fa-search" title="Filter the chapter list by their titles"></i> Select a chapter</li>
                    </ol >
                    The connector you are looking for is not in the list ?<br/>
                    👉 Create a website request on the github (issue)<br/>
                    Use the copy/paste feature if you already have the manga link<br/>
                    👉 See the documentation for details
                </div>
                <h3>Ready to go 🚀</h3>
                <div class="border">Download, view, bookmark your favorite mangas 📚</div>
            </div>
        </div>
    </template>

    <script>
        /** @polymerElement */
        class HakunekoStart extends Polymer.Element {
            /**
             *
             */
            static get is() {
                return 'hakuneko-start';
            }

            /**
             *
             */
            static get properties() {
                return {
                };
            }

            /**
             *
             */
            ready() {
                super.ready();
            }

        }

        window.customElements.define( HakunekoStart.is, HakunekoStart );
    </script>

</dom-module>
